<template>
  <div class="">
    <el-card v-if="contentView">
      <el-row>
        <el-col :span="4">
          <el-date-picker value-format="yyyy-MM-dd HH:mm:ss"
            v-model="queryInfo.pushTimeStart" size="medium"
            type="datetime"
            placeholder="选择发布开始日期">
          </el-date-picker>
        </el-col>
        <el-col :span="4">
          <el-date-picker value-format="yyyy-MM-dd HH:mm:ss"
            v-model="queryInfo.pushTimeEnd" size="medium"
            type="datetime"
            placeholder="选择发布结束日期">
          </el-date-picker>
        </el-col>
        <el-col :span="2" style="margin-right: 10px">
          <el-input size="medium"
                    placeholder="需求计划单号"
                    v-model="queryInfo.planNumber"
                    clearable>
          </el-input>
        </el-col>
        <el-col :span="1">
          <el-button   type="primary" icon="el-icon-search" @click="seacher">搜索</el-button>
        </el-col>

        <el-col :span="12" style="text-align: right;">
                    <div style="display: flex;justify-content:flex-end;">
<!--          <el-button v-if="authFilter('down_materail_template')" type="primary" icon="el-icon-download" @click="downloadMaterailTemplate">下载导入模板</el-button>-->
          <el-upload   style="margin: 0 10px;" action="http://47.106.202.170:10084/material/procurementApply/importPlanApply"
                        :on-success="uploadSuccessHandler"
                        :on-error="uploadFailHandler"
                        :before-upload="beforeUpload"
                        name="excel" :show-file-list="false" :headers="headers">
            <el-button   type="primary" icon="el-icon-download">导入</el-button>
          </el-upload>
          <el-button    type="primary" icon="el-icon-plus" @click="operationView(0)">添加</el-button>
          </div>
        </el-col>
      </el-row>
      <!--表格-->
      <el-table :row-style="{height: '10px'}" :cell-style="{padding:'0px'}" :data="tableData" border v-loading="loading">
        <el-table-column type="index" label="序号" v-if="false" align="center" width="55">
        </el-table-column>
        <el-table-column prop="pushTime" label="发布时间" align="center" width="150"></el-table-column>
        <el-table-column prop="planNumber" label="需求计划单号" align="center" width="100">
        </el-table-column>
        <el-table-column prop="standProjectNumber" label="标准对象行项目号" align="center" width="150">
        </el-table-column>
        <el-table-column prop="standObjectNumber" label="标准对象号" align="center" width="100">
        </el-table-column>
        <el-table-column prop="projectText" :show-overflow-tooltip="true" label="项目文本" align="center" width="100">
        </el-table-column>
        <el-table-column prop="unloadingAddress" :show-overflow-tooltip="true" label="卸货点" align="center"></el-table-column>
        <el-table-column prop="submitText" label="提报单元" align="center"></el-table-column>
        <el-table-column prop="stockAddress" label="库存地" align="center"></el-table-column>

        <el-table-column prop="workOrderNo" label="工单/网络号" align="center"></el-table-column>
        <el-table-column prop="businessType" label="业务类型" align="center"></el-table-column>
        <!-- <el-table-column prop="description" label="物料描述" align="center" width="200">
        </el-table-column> -->
        <!-- <el-table-column prop="planName" label="计划名称" align="center">
        </el-table-column> -->

        <!--<el-table-column prop="projectText" label="项目文本" align="center" width="200"></el-table-column>
        <el-table-column prop="pushTime" label="发布时间" align="center" width="150"></el-table-column>--

        <! <el-table-column prop="singlePrice" label="单价" align="center"></el-table-column> -->

        <el-table-column  label="审核状态" align="center" >
          <template slot-scope="scope">
            <span v-if="scope.row.status.code == 3" @click="history(scope.row)" style="color: #1c9913;cursor: pointer;">{{scope.row.status.name}}</span>
            <span v-else-if="scope.row.status.code==2" @click="history(scope.row)" style="color: #ffb547;cursor: pointer;">{{scope.row.status.name}}</span>
            <span v-else style="color: #ff4141">{{scope.row.status.name}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" align="center">
        </el-table-column>
        <el-table-column prop="creatorName" label="创建人" align="center">
        </el-table-column>
        <!--<el-table-column  label="入库状态" align="center" >-->
          <!--<template slot-scope="scope">-->
            <!--<span>{{scope.row.inStatus.name}}</span>-->
          <!--</template>-->
        <!--</el-table-column>-->

        <el-table-column label="操作" align="center" width="180">
          <template     slot-scope="scope">
            <el-button type="text" icon="el-icon-tickets" @click="operationView(1,scope.row)">编辑</el-button>
            <el-button v-if="scope.row.status.code == 2" type="text" icon="el-icon-edit" @click="withdraw(scope.row)">撤回</el-button>
            <!-- <el-button type="primary" icon="el-icon-delete" :loading="scope.row.loading" @click="operationView(2,scope.row)">删除</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <el-pagination style="text-align: center;" :disabled="loading" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" :current-page="queryInfo.pagenum" :page-sizes="[25,50]"
        :page-size="queryInfo.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </el-card>
    <submitForm v-else :subData="subData" @closeView="closeView" @refresh="refreshTable"></submitForm>
    <historyLook :visible.sync="visible" :historyTables="historyTables"/>
  </div>
</template>

<script>
import {
  pageProcurement,
  deleteProcurement,
  downloadMaterailTemplate
} from '@/api/purchaseApply.js'
import { getHistoryLook,postWithdraw } from '@/api/user'
import submitForm from './components/submitForm.vue'
import historyLook from '@/components/historyLook'
import { mapState } from "vuex";
let $this = null
export default {
  name: 'apply',
  components: {
    submitForm,
    historyLook
  },
  computed: {
    ...mapState(["authList"]),
  },
  data () {
    return {
      contentView: true,
      loading: false,
      placeholder:'创建人',
      queryInfo: {
        pageNo: 1,
        pageSize: 25,
        // creatorName: '',
        pushTimeStart:'',
        pushTimeEnd:''
      },
      tableData: [],
      total: 0,
      subData: {
        btnId: 0,
        id: ''
      },
      visible: false,
      historyTables: [],
      headers: {
        apiKey: window.sessionStorage.getItem('token')
      },
    }
  },
  created () {
    $this = this
    if(this.$route.params.id) {
      this.contentView = false
      this.subData = {
        btnId: 1,
        id: this.$route.params.id
      }
    }
    $this.getPageProcurement()
  },
  methods: {
            // 下载导入模板
      downloadMaterailTemplate () {

        downloadMaterailTemplate().then(res => {

        $this.downloadFile(res, '采购申请导入模板')
      }).catch(err => {
        return $this.$message.error('导出文件错误')
      })
      },
      downloadFile (res, name) {
        const blob = new Blob([res.data])
        const fileName = name + '.xlsx'
        const elink = document.createElement('a')
        elink.download = fileName
        elink.style.display = 'none'
        elink.href = URL.createObjectURL(blob)
        document.body.appendChild(elink)
        elink.click()
        URL.revokeObjectURL(elink.href)
        document.body.removeChild(elink)
      },
    beforeUpload(file) {
        this.$loading({
          lock: true,
          text: '正在导入...',
          spinner: 'el-icon-loading',
        })
      },
        // 导入成功触发
      uploadSuccessHandler (response, file, fileList) {
        this.$loading().close()
        if (response.success) {
          $this.$message({
            type: 'success',
            message: response.message,
            showClose: true
          })
          this.getPageProcurement()
        } else {
          $this.$message({
            type: 'error',
            message: response.message,
            showClose: true
          })
        }
      },
      uploadFailHandler () {
        this.$loading().close()
        $this.$message.error('导入失败')
      },
    authFilter (code) {
      let flag = false
      if(this.authList.length) {
        this.authList.forEach(item => {
          if(item.resourceCode == code) {
            flag = true
          }
        })
      }
      return flag
    },
    // 撤回
    withdraw (row) {
      this.$loading()
     postWithdraw({"documentId": row.id }).then(res => {
       this.$loading().close()
        const { data } = res
        if(data.code == "200") {
          this.getPageProcurement()
          this.$message.success(data.message)
        }else {
          this.$message.error(data.message)
        }
      })
    },
    // 审批历史
    history (row) {
      getHistoryLook(row.processInstanceId).then(res => {

        this.historyTables = res.data.data
        this.visible = true
      })
    },
    getPageProcurement () {
      $this.loading = true
      pageProcurement($this.queryInfo).then(res => {
        $this.loading = false
        $this.tableData = res.data.data.records
        $this.total = res.data.data.total
      }).catch(err => {
        $this.loading = false
        return $this.$message.error(err.message)
      })
    },
    handleCurrentChange (val) {
      $this.queryInfo.pageNo = val
      $this.getPageProcurement()
    },
    handleSizeChange (size) {
      $this.queryInfo.pageSize = size
      $this.getPageProcurement()
    },
    seacher (key) {
      // this.queryInfo.creatorName = key
      $this.getPageProcurement()
    },
    operationView (btnId, row) {
      if (btnId === 0) {
        $this.subData.btnId = btnId
        $this.contentView = false
      } else if (btnId === 1) {
        $this.subData.btnId = btnId
        $this.subData.id = row.id
        $this.contentView = false
      } else if (btnId === 2) {
        $this.$set(row, 'loading', true)
        $this.deleteProcurement(row)
      } else {
        return $this.$message.error('操作错误')
      }
    },
    // 删除
    deleteProcurement (row) {
      deleteProcurement(row.id).then(res => {
        $this.$set(row, 'loading', false)
        $this.getPageProcurement()
        return $this.$message.success('删除成功')
      }).catch(err => {
        $this.$set(row, 'loading', false)
        return $this.$message.error('操作错误')
      })
    },
    // 返回table
    closeView () {
      $this.contentView = true
    },
    refreshTable () {
      $this.getPageProcurement()
      $this.contentView = true
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
